<template>
  <a-select
    :value="arrayValue"
    @change="onChange"
    :disabled="disabled"
    mode="multiple"
    :placeholder="placeholder"
    :getPopupContainer="getParentContainer"
    :filterOption="false"
    @search="loadData"
    :allowClear="allowClear"
    :showArrow="false"
    :notFoundContent="loading ? undefined : null">
     <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-select-option
      v-for="(item,index) in dictOptions"
      :key="index"
      :value="item.value">
      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
        {{ item.text || item.label }}
      </span>
    </a-select-option>
  </a-select>

</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache} from '@/api/api'
   import { getAction } from '@/api/manage'
  export default {
    name: 'JSearchSelectMultipleUser',
    props: {
      dictCode: {
        type: String,
        default: "sys_user,username,username",
        required: false
      },
      placeholder:{
        type:String,
        default:"请输入并选择",
        required:false
      },
      disabled: Boolean,
      value: String,
      type: String,
      options:Array,
      spliter:{
        type: String,
        required: false,
        default: ','
      },
      popContainer:{
        type:String,
        default:'',
        required:false
      },
      allowClear: {
        type: Boolean,
        default:true
      }
    },
  data() {
       this.lastLoad = 0;
      return {
        dictOptions: [],
        arrayValue: !this.value ? [] : this.value.split(this.spliter),
        loading:false
      }
    },
    created() {
    },
    watch:{
      options: function(val){
        this.setCurrentDictOptions(val);
      },
      dictCode:{
        immediate:true,
        handler() {
          if (this.value) { 
           this.initDictData()
          } 
        },
      },
      value(val) {
        if(!val){
          this.arrayValue = []
          this.dictOptions =[]
        }else{
          this.arrayValue = this.value.split(this.spliter)
        }
      }
    },
    methods: {
      initDictData() {
        if(this.options && this.options.length>0){
          this.dictOptions = [...this.options]
        }else{
          //优先从缓存中读取字典配置
          let cacheOption = getDictItemsFromCache(this.dictCode)
          if(cacheOption && cacheOption.length>0){
            this.dictOptions = cacheOption
            return
          }
          //根据字典Code, 初始化字典数组
          ajaxGetDictItems(this.dictCode, null).then((res) => {
            if (res.success) {
              this.dictOptions = res.result ? res.result : []
            } else { 
              this.$message.warning(res.message);
            }
          })
        }
      },
      loadData(value) {
        if (value) {
          this.lastLoad += 1
          const currentLoad = this.lastLoad
          this.dictOptions = []
          this.loading = true
          getAction(`/sys/dict/loadDict/${this.dictCode},status=1`, { keyword: value, pageSize: this.pageSize }).then(res => {
            this.loading = false
            if (res.success) {
              if (currentLoad != this.lastLoad) {
                return
              }
              this.dictOptions = res.result ? res.result :[]
            } else {
              this.$message.warning(res.message)
            }
          })
        } else { 
          this.dictOptions = []
        }
      },
      onChange(selectedValue) {
        if (selectedValue && selectedValue.length>0) {
          this.$emit('change', selectedValue.join(this.spliter));
        } else { 
          this.arrayValue = []
          this.dictOptions = []
          this.$emit('change', null);
        }
      },
      setCurrentDictOptions(dictOptions){
        this.dictOptions = dictOptions
      },
      getCurrentDictOptions(){
        return this.dictOptions
      },
      getParentContainer(node){
        if(!this.popContainer){
          return node.parentNode
        }else{
          return document.querySelector(this.popContainer)
        }
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
  
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
